<%@ page import="java.util.List" %>
<%@ page import="com.qq.model.Book" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--这里添加了jstl--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.sql.ResultSet" %>
<%
    String path = request.getContextPath();
    List<Book> bookList = (List<Book>)request.getAttribute("bookList");
%>
<html>
<head>
    <meta charset="UTF-8">
    <title>书籍标签</title>
    <link rel="stylesheet" href="<%=path%>/jingtai/bootstrap400/css/bootstrap.css">
<%--这里我们要引入静态资源下面的模态框才有效--%>
    <script src="<%=path%>/jingtai/jquery-3.3.1.js"></script>
    <script src="<%=path%>/jingtai/bootstrap400/js/bootstrap.js"></script>
</head>
<body>

<div class="container">
    <jsp:include page="../common/header.jsp"/>
</div>
<div class="container">
    <c:if test="${!empty bookList}">
        <%--实现添加功能编辑--%>
        <div class="mb-2 mb-2">
                <%-- 这里的注解是到BookAddServlet类里面去，再由这个类转换到addForm.jsp页面--%>
            <a href="add" class="btn btn-success ">添加书籍</a>
        </div>
        <table class="table ">
            <tr><th>编号</th><th>ID</th><th>书名</th><th>作者</th><th>价格</th><th>操作</th></tr>
            <c:forEach items = "${bookList}" var="book" varStatus="sta">
                <%-- varStatus="sta"   <td>#.${sta.index}</td> 这里是给定一个编号，为了防止数据库里删除中间数据时编号不连续--%>
                <tr> <td>#.${sta.index}</td>   <td>${book.id}</td><td>${book.name}</td><td>${book.author}</td><td>${book.price}</td>
                        <%--编写删除功能和编辑功能  btn-sm控制按钮的大小，注意是写在双引号里边的 btn-warning按钮的颜色 --%>
                    <td>
                        <a href="javascript:void(0)"  onclick="openEdit(${book.id})" class="btn btn-warning  btn-sm" >编辑</a>
                        <a  href="javascript:void(0)"  onclick="del(${book.id})"    class="btn btn-dark  btn-sm" >删除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </c:if>
    <script>
        //id作用相当于用来传参数，就是你删除了那本书籍然后将书籍的id传递过来
        function del(id){
            //confirm("确定要删除吗？")作用是弹出你是否确定要删除
            //为了防止用户误删
            if (confirm("确定要删除吗？")){
                location.href = "del?id="+id;
            }
        }
    </script>
</div>
<%--这是我们引入的模态框--%>
<div class="modal"  id="editM"  tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">书籍编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <%--从这里加入我们想要展示的数据，--%>
                <form method="post" id="inceForm" action="edit">
                    <div class="form-group">
                        <%--        这里的el表达式中的book是在BookUpdateServlet里面定义的--%>
                        <label>ID</label>:${book.id}
                        <input type="text" name="id" id="id" class="form-control" value="${book.id}">
                    </div>
                    <div class="form-group">
                        <label>作者</label>
                        <%-- value="${book.author}  通过value进行获取书籍数据信息 在input中加入readonly就只读不能写，但是可以提交，--%>
                        <%-- type="hidden"不会显示，但是可以进行提交，但是可以通过服务器进行修改--%>
                        <input type="text" name="author" id="author" class="form-control" value="${book.author}">
                    </div>
                    <div class="form-group">
                        <label>书名</label>
                        <input type="text" name="name" id="name" class="form-control" value="${book.name}">
                    </div>
                    <div class="form-group">
                        <label>价格</label>
                        <input type="text" name="price" id="price" class="form-control" value="${book.price}">
                    </div>
                     <%--这里将type属性设置成button就不会被提交了 --%>
                    <button type="button" onclick="su()"   class="btn btn-success">提交</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>

                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    function su() {
        alert("进行数据提交");
        //ajax提交到服务器，修改数据
        //inceForm这里是给form添加了一个id，就是命名的意思，这里是编辑的页面的
        var id = $("#inceForm #id").val();
        var name = $("#inceForm #name").val();
        var author = $("#inceForm #author").val();
        var price = $("#inceForm #price").val();

        $.ajax({
            url:"update01",
            method: "post",
            data: {
                "id":id,
                "name":name,
                "author":author,
                "price":price
            },
            success:function (data) {
                //这里的ok是BoodUpdataServlet里面的。
                if (data=="ok")alert("修改成成功");
                else alert("失败");
                //关闭模态框
                $("#editM").modal("hide");
                //进行页面刷新
                location.reload();
                //这里把 自己返回给自己也相当于是刷新
                //location.href=location.href;

            }

        });
    }


    function openEdit(id) {
        //这里是模态框的地址,这里我们要引入静态资源太能用静态模态框
        //要引入jingtai/jquery-3.3.1.js和jingtai/bootstrap400/js/bootstrap.js
        //这两个静态资源,这里的editM是模态框里面对应的id
        $("#editM").modal("show");
        $.ajax({
            //这里的url是我们BoodUpdateServlet里面的地址
            url:"update01",
            method:"get",
            dataType:"json",
            data:{
                "id":id
            },
            success:function (data) {
                console.log(data);
                console.log(data.name);
               //这里是将数据获取到填充到表单上
                $("#id").val(id);
                $("#name").val(data.name);
                $("#author").val(data.author);
                $("#price").val(data.price);
            },
            error:function (e) {
                console.log("报错");
                console.log(e);
            }
        });
    }
</script>
</body>
</html>
